<template>
	<view>
		<view class="top_search">
			<uni-search-bar :radius="100" @confirm="searchFn"></uni-search-bar>			
		</view>
		<view class="list_box">
			 <radio-group class="uni-list" @change="radioChange">			   
				<label class="list_main" v-for="(item,index) in dataList" :key="index" :disabled="item.allocated">					
						<view >						
							  <radio :disabled="item.allocated==1?true:false" :id="item.realname" :value="JSON.stringify({user_id:item.id,store:item.store,index:index})" :checked="item.checked"></radio>
						</view>
						<view>
							<label class="label-2-text" :for="item.realname">
								<text>{{item.realname}}</text>
								<text class="" style="color: red;font-size: 10upx;" v-if="item.allocated==1?true:false">{{item.allocated==1?' 已拥有此客资':''}}</text>
								<text v-if="item.hotel_text">--{{item.hotel_text}}</text>
							</label>
						</view>
				</label>			
			</radio-group>
		</view>		
		<text class="true_btn" @click="true_btnFn" >
			确定
		</text>
		<wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex"  @onConfirm="onConfirm"></wzp-picker>
	</view>
</template>

<script>
	import wzpPicker from '@/component/wzp-picker/wzpPicker';
	import sun from '@/utils/sun.js'
	export default {
		components:{
			wzpPicker
		},
		data() {
			return {
				searchValue:'',
				dataList:[],
				radioItems: [{
						 name: 'USA',
						 value: '美国',						 						
					 },
					 {
						 name: 'CHN',
						 value: '中国',						 
						 checked: 'true'
					 }
				 ],
				pickerList:[],	
				mode:'',
				defaultIndex:[0],
				hotel_id:'',
				options:'',
				user_id:'',
				hotel_text:'',
				index:""
			};
		},
		onLoad(options){
		
			this.options=options
		},
		methods:{
			searchFn(e){				
				let value=e.value
				let that=this
				sun.request({
					url: "/h5/ucenter.Usercenter/getUserByName",
					showLoading: true,
					token:true,
					data:{
						allocate_id:that.options.id,
						realname:value,
					},
					success(res) {				
						if(res.code==200){
							
							that.dataList=res.data.list
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			},
		
			radioChange(e){
				this.user_id=JSON.parse(e.detail.value).user_id				
				this.index=JSON.parse(e.detail.value).index				
				if(JSON.parse(e.detail.value).store.length>=1){					
					this.mode = 'one';								
					this.defaultIndex = [0];
					this.pickerList= JSON.parse(e.detail.value).store
					this.$refs.wzpPicker.showPicker();
				}else{		
				  this.hotel_id=''	
				}							
			},
			onConfirm(e){					
				this.hotel_id=this.pickerList[e[0]].id					
				this.dataList[this.index].hotel_text=this.pickerList[e[0]].title	
				this.$forceUpdate()
			},
			true_btnFn(){
				let that=this
				sun.request({
					url: "/h5/customer.customer/distribute",
					showLoading: true,
					token:true,
					data:{
						user_id:[that.user_id],
						hotel_id:that.hotel_id,
						allocate_id:that.options.id
					},
					success(res) {				
						if(res.code==200){						   
						   uni.showModal({
						       title: '提示',
						       content: '是否确定该操作？',
						       success: function (res) {
						           if (res.confirm) {
								     uni.navigateTo({
								     	url:"../customerDetail?id="+that.options.id
								     })
						            } else if (res.cancel) {
						           }
						       }
						   })						   						  
						}else{
							uni.showToast({
								icon:'none',
								title:res.msg
							})
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			},
			
		}
	}
</script>

<style lang="less">
	page{
		padding: 0;
		background-color: #f4f4f4;
	}
	.top_search{
		width: 100%;
		display: flex;
	    justify-content: center;
		background-color: #FFFFFF;
	}
	.list_box{
		width: 100%;
		padding: 30upx 0upx;
		box-sizing: border-box;
		.list_main{
		   padding: 20upx 30upx;
		   border-bottom: 1upx solid #f4f4f4;
		   background-color: #FFFFFF;	
		   display: flex;
		   justify-content: left;
		}
	}
	.true_btn{
		position: fixed;
		right: 40upx;
		bottom: 40upx;
		padding: 15upx  25upx;
		background: #007AFF;
		color: #FFFFFF;
		border-radius: 20upx;
		font-size: 25upx;
	}
</style>
